/* Syntax highlighting theme using prettylights with global color variables.
 * Based on prettylights classes with extensions for Base UI docs.
 * See styles.css for global theme color definitions. */
:root {
  /* Prettylights syntax colors mapped to global theme */
  --color-prettylights-syntax-comment: var(--color-gray);
  --color-prettylights-syntax-constant: var(--color-blue);
  --color-prettylights-syntax-constant-other-reference-link: var(--color-navy);
  --color-prettylights-syntax-entity: var(--color-violet);
  --color-prettylights-syntax-entity-tag: var(--color-green);
  --color-prettylights-syntax-keyword: var(--color-red);
  --color-prettylights-syntax-string: var(--color-navy);
  --color-prettylights-syntax-string-regexp: var(--color-green);
  --color-prettylights-syntax-variable: var(--color-red);
  --color-prettylights-syntax-storage-modifier-import: var(--color-navy);
  --color-prettylights-syntax-brackethighlighter-angle: var(--color-gray);
  --color-prettylights-syntax-brackethighlighter-unmatched: var(--color-red);
  --color-prettylights-syntax-sublimelinter-gutter-mark: var(--color-gray);

  /* Invalid/error states */
  --color-prettylights-syntax-invalid-illegal-bg: var(--color-red);
  --color-prettylights-syntax-invalid-illegal-text: var(--color-content);
  --color-prettylights-syntax-carriage-return-bg: var(--color-red);
  --color-prettylights-syntax-carriage-return-text: var(--color-content);

  /* Markup/markdown (unused in code demos but included for completeness) */
  --color-prettylights-syntax-markup-heading: var(--color-blue);
  --color-prettylights-syntax-markup-bold: var(--color-foreground);
  --color-prettylights-syntax-markup-italic: var(--color-foreground);
  --color-prettylights-syntax-markup-list: var(--color-red);
  --color-prettylights-syntax-markup-changed-bg: transparent;
  --color-prettylights-syntax-markup-changed-text: var(--color-red);
  --color-prettylights-syntax-markup-deleted-bg: transparent;
  --color-prettylights-syntax-markup-deleted-text: var(--color-red);
  --color-prettylights-syntax-markup-inserted-bg: transparent;
  --color-prettylights-syntax-markup-inserted-text: var(--color-green);
  --color-prettylights-syntax-markup-ignored-bg: transparent;
  --color-prettylights-syntax-markup-ignored-text: var(--color-gray);
  --color-prettylights-syntax-meta-diff-range: var(--color-violet);

  /* Docs-infra extensions for concepts not in prettylights */
  --color-docs-infra-syntax-nullish: var(--color-gray-500);
  --color-docs-infra-syntax-other: var(--color-foreground);
  --color-docs-infra-syntax-bracket-tag: var(--color-gray);
  --color-docs-infra-syntax-bracket-curly: var(--color-gray);
  --color-docs-infra-syntax-bracket-round: var(--color-gray);
  --color-docs-infra-syntax-bracket-square: var(--color-gray);
  --color-docs-infra-syntax-bracket-angle: var(--color-gray);
  --color-docs-infra-syntax-bracket-quote: var(--color-gray);
}

.pl-c {
  color: var(--color-prettylights-syntax-comment);
}

.pl-c1,
.pl-s .pl-v {
  color: var(--color-prettylights-syntax-constant);
}

.pl-e,
.pl-en {
  color: var(--color-prettylights-syntax-entity);
}

.pl-smi,
.pl-s .pl-s1 {
  color: var(--color-prettylights-syntax-storage-modifier-import);
}

.pl-ent {
  color: var(--color-prettylights-syntax-entity-tag);
}

.pl-k {
  color: var(--color-prettylights-syntax-keyword);
}

.pl-s,
.pl-pds,
.pl-s .pl-pse .pl-s1,
.pl-sr,
.pl-sr .pl-cce,
.pl-sr .pl-sre,
.pl-sr .pl-sra {
  color: var(--color-prettylights-syntax-string);
}

.pl-v,
.pl-smw {
  color: var(--color-prettylights-syntax-variable);
}

.pl-bu {
  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
}

.pl-ii {
  color: var(--color-prettylights-syntax-invalid-illegal-text);
  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
}

.pl-c2 {
  color: var(--color-prettylights-syntax-carriage-return-text);
  background-color: var(--color-prettylights-syntax-carriage-return-bg);
}

.pl-sr .pl-cce {
  font-weight: bold;
  color: var(--color-prettylights-syntax-string-regexp);
}

.pl-ml {
  color: var(--color-prettylights-syntax-markup-list);
}

.pl-mh,
.pl-mh .pl-en,
.pl-ms {
  font-weight: bold;
  color: var(--color-prettylights-syntax-markup-heading);
}

.pl-mi {
  font-style: italic;
  color: var(--color-prettylights-syntax-markup-italic);
}

.pl-mb {
  font-weight: bold;
  color: var(--color-prettylights-syntax-markup-bold);
}

.pl-md {
  color: var(--color-prettylights-syntax-markup-deleted-text);
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}

.pl-mi1 {
  color: var(--color-prettylights-syntax-markup-inserted-text);
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}

.pl-mc {
  color: var(--color-prettylights-syntax-markup-changed-text);
  background-color: var(--color-prettylights-syntax-markup-changed-bg);
}

.pl-mi2 {
  color: var(--color-prettylights-syntax-markup-ignored-text);
  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
}

.pl-mdr {
  font-weight: bold;
  color: var(--color-prettylights-syntax-meta-diff-range);
}

.pl-ba {
  color: var(--color-prettylights-syntax-brackethighlighter-angle);
}

.pl-sg {
  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
}

.pl-corl {
  text-decoration: underline;
  color: var(--color-prettylights-syntax-constant-other-reference-link);
}

/* Docs-infra extensions (.di-* classes) */

/* Nullish values (null, undefined) */
.di-n {
  color: var(--color-docs-infra-syntax-nullish);
}

/* Default text color */
.di-d {
  color: var(--color-foreground);
}

/* Parameter highlighting */
.di-p {
  color: var(--color-prettylights-syntax-storage-modifier-import);
}

/* Misc/other markup styling */
.di-o {
  color: var(--color-docs-infra-syntax-other);
}

/* Bracket types */
.di-bt {
  color: var(--color-docs-infra-syntax-bracket-tag);
}

.di-bc {
  color: var(--color-docs-infra-syntax-bracket-curly);
}

.di-br {
  color: var(--color-docs-infra-syntax-bracket-round);
}

.di-bs {
  color: var(--color-docs-infra-syntax-bracket-square);
}

.di-ba {
  color: var(--color-docs-infra-syntax-bracket-angle);
}

.di-bq {
  color: var(--color-docs-infra-syntax-bracket-quote);
}

/* Diff additions */
.di-ins {
  color: var(--color-prettylights-syntax-markup-inserted-text);
  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
}

/* Diff deletions */
.di-del {
  color: var(--color-prettylights-syntax-markup-deleted-text);
  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
}

/* Diff changes */
.di-chg {
  color: var(--color-prettylights-syntax-markup-changed-text);
  background-color: var(--color-prettylights-syntax-markup-changed-bg);
}

/* Diff ignored/untracked */
.di-ign {
  color: var(--color-prettylights-syntax-markup-ignored-text);
  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
}

/* Diff range indicator */
.di-rng {
  font-weight: bold;
  color: var(--color-prettylights-syntax-meta-diff-range);
}

/* Special handling for CSS language */
[data-language='css'] {
  --color-prettylights-syntax-variable: var(--color-navy);
}

/* Target CSS property names in CSS code blocks
   Property names are .pl-c1 elements that are followed by a text node containing ':'
   This distinguishes them from function names like 'var' which are followed by '(' */
[data-language='css'] .line > .pl-c1:first-of-type {
  color: var(--color-foreground);
}

/* Inline code and highlighted characters - collapse most colors to blue */
[data-inline],
[data-highlighted-chars] {
  --color-prettylights-syntax-comment: var(--color-blue);
  --color-prettylights-syntax-constant: var(--color-blue);
  --color-prettylights-syntax-entity: var(--color-blue);
  --color-prettylights-syntax-keyword: var(--color-blue);
  --color-prettylights-syntax-string: var(--color-blue);
  --color-prettylights-syntax-variable: var(--color-blue);
  --color-prettylights-syntax-storage-modifier-import: var(--color-blue);
  --color-docs-infra-syntax-nullish: var(--color-blue);
}

/* Table code - recover some syntax highlighting */
[data-table-code] {
  --color-prettylights-syntax-entity: var(--color-violet);
  --color-prettylights-syntax-keyword: var(--color-red);
  --color-prettylights-syntax-string: var(--color-navy);
  --color-docs-infra-syntax-nullish: var(--color-gray-500);
}

/* Line highlighting */
pre [data-hl] {
  background-color: var(--color-line-highlight);
}

pre [data-hl='strong'] {
  background-color: var(--color-line-highlight-strong);
}

/* Character/word highlighting */
pre [data-hlc] {
  color: var(--color-blue);
  background-color: var(--color-inline-highlight);
}
